<!-- 栏目管理 -->
<template>
  <el-form ref="dataFormRef" :model="searchForm" inline label-width="80px">
    <el-form-item label="操作类型" prop="type">
      <el-select v-model="searchForm.type" clearable  style="width: 240px">
        <el-option label="发布" :value="1" />
        <el-option label="修改" :value="2" />
        <el-option label="删除" :value="3" />
        <el-option label="定时发布" :value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="操作状态" prop="success">
      <el-select v-model="searchForm.success" clearable  style="width: 240px">
        <el-option label="成功" :value="1" />
        <el-option label="失败" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getList">查询</el-button>
      <el-button type="primary" @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="data.tableData" row-key="id" table-layout="auto" style="width: 100%">
    <el-table-column prop="moduleName" label="模块名称" width="" />
    <el-table-column prop="type" label="操作类型" width="">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.type === 1">发布</el-tag>
        <el-tag type="warning" v-if="scope.row.type === 2">修改</el-tag>
        <el-tag type="danger" v-if="scope.row.type === 3">删除</el-tag>
        <el-tag type="primary" v-if="scope.row.type === 4">定时发布</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="success" label="操作状态" width="">
      <template #default="scope">
        <el-tag type="success" v-if="scope.row.success === 1">成功</el-tag>
        <el-tag type="danger" v-if="scope.row.success === 2">失败</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="userId" label="操作人" width="" />
    <el-table-column prop="updateTime" label="操作时间">
      <template #default="{ row }">
        <span>{{ formatDate(row.updateTime) }}</span>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getList" @current-change="getList" style="margin-top: 20px;display:flex;justify-content: flex-end;" />

</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { selectContentLog } from '@/api/allApi'
import { ElMessage, ElMessageBox } from 'element-plus/es'

// let tableData = reactive([])
const pageNum = ref(1) //第几页
const pageSize = ref(10) //每页多少条
const total = ref(0) //总条数
const data = reactive({
	tableData: []
})
const searchForm = reactive({
	type: '',
	success: null
})

onMounted(() => {
	getList()
})

const getList = () => {
	selectContentLog({
		websiteId: Number(localStorage.getItem('WebsiteId')), //网站id 1：鞍钢官网 2：博物馆
		pageNum: pageNum.value,
		pageSize: pageSize.value,
		type: searchForm.type,
		success: searchForm.success
	}).then((res: any) => {
		if (res.code === 0) {
			data.tableData = res.data.list
			total.value = res.data.total
		} else {
			ElMessage.success(res.msg)
		}
	})
}
function formatDate(dateString) {
  if (!dateString) return '';
  // 匹配日期部分和时间部分
  const match = dateString.match(/(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2})/);
  if (!match) return dateString;
  // 格式化为 yyyy-MM-dd HH:mm:ss
  return `${match[1]}-${match[2]}-${match[3]} ${match[4]}:${match[5]}:${match[6]}`;
}
const reset = () => {
	searchForm.type = ''
	searchForm.success = null
	getList()
}
</script>

<style lang="scss" scoped>
//搭配el-table里的table-layout="auto"属性，再让每一列里的width为空即可展现出适应表格内容的列宽
:deep(.el-table .cell) {
	width: max-content;
	display: inline-block;
}
</style>
